import React, {useRef, useState} from "react";
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import {
  DownOutlined,
  HeartOutlined,
  PlusOutlined,
  UserOutlined,
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import {Progress, Tag, Button, Space, Badge, Typography, Image, Row, Col, Card, Avatar} from 'antd';
import ProList from '@ant-design/pro-list';
import {queryData} from "@/components/Common/crud";
import {getDBImage} from "@/pages/DataBase/DB";
import DBForm from "./components/DBForm";
import {ActionType} from "@ant-design/pro-table";

import styles from './index.less';
import {DataBaseItem} from "@/pages/DataBase/data";
import {checkHeartBeat} from "@/pages/DataBase/service";

const {Text} = Typography;

const url = '/api/database';
const cardBodyStyle = {
  backgroundColor: 'rgba(0, 0, 0, 0.08)',
  position: 'relative',
  zIndex: 999
};

const DataBaseTableList: React.FC<{}> = (props: any) => {

  const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
  const [values, setValues] = useState<any>({});
  const actionRef = useRef<ActionType>();

  const onEdit = (row: DataBaseItem) => {
    setValues(row);
    handleDBFormModalVisible(true);
  };

  const onCheckHeartBeat = (row: DataBaseItem) => {
    checkHeartBeat(row.id);
    actionRef.current?.reloadAndRest?.();
  };

  return (
    <PageContainer>
      <ProList
        actionRef={actionRef}
        toolBarRender={() => {
          return [
            <Button type="primary" onClick={() => {
              setValues({});
              handleDBFormModalVisible(true);}}>
              <PlusOutlined/> 新建
            </Button>,
          ];
        }}
        pagination={{
          defaultPageSize: 8,
          showSizeChanger: false,
        }}
        grid={{gutter: 16, column: 4}}
        request={(params, sorter, filter) => queryData(url, {...params, sorter: {id: 'descend'}, filter})}
        renderItem={(row) => {
          return (
            <Card

              style={{width: 300}}
              hoverable={true}
              bodyStyle={cardBodyStyle}
              cover={
                <div className={styles.cardImage}>
                  <Image
                    preview={false}
                    style={{padding: '20px'}}
                    src={getDBImage(row.type)}
                    fallback=""
                  />
                </div>
              }
              actions={[
                <HeartOutlined key="setting" onClick={()=>{
                  onCheckHeartBeat(row);
                }}/>,
                <EditOutlined key="edit" onClick={() => {
                  onEdit(row);
                }}/>,
                <EllipsisOutlined key="ellipsis"/>,
              ]}
            >
              <Card.Meta
                title={<Tag color="gray" key={row.alias}>
                  {row.alias}
                </Tag>}
                description={(
                  <Space size={0}>
                    <Tag key={row.name}>
                      {row.name}
                    </Tag>
                    <Tag color="blue" key={row.groupName}>
                      {row.groupName}
                    </Tag>
                    {(row.status) ?
                      (<Tag icon={<CheckCircleOutlined/>} color="success">
                        正常
                      </Tag>) :
                      <Tag icon={<ExclamationCircleOutlined/>} color="warning">
                        异常
                      </Tag>}
                  </Space>
                )}
              />
            </Card>)
        }}
        headerTitle="数据源"
      />
      <DBForm onCancel={() => {
        handleDBFormModalVisible(false);
        setValues({});
      }}
              modalVisible={chooseDBModalVisible}
              onSubmit={() => {
                actionRef.current?.reloadAndRest?.();
              }}
              values={values}
      />
    </PageContainer>
  );
};


export default DataBaseTableList;
